<div class="row">
	<div class="col-md-12">
		<ol class="breadcrumb">
			<li>
				<a href="#" onclick="toHome()">
					主页
				</a>
			</li>
			<li>
				<a href="#" class="toList" onclick="toMovieBanner()">
					轮播图列表
				</a>
			</li>
			<li class="active">
				电影轮播图修改
			</li>
		</ol>
	</div>
</div>
<form role="form" class="form-horizontal">
	<div class="row page-cont">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cont-top">
			<div class="panel panel-white">
				<div class="panel-heading">
					<h4 class="panel-title">
						<span class="title-text">影院顶部图片数据更改</span>
					</h4>
					<div class="panel-tools">
						<div class="dropdown">
							<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
								<i class="fa fa-cog"></i>
							</a>
							<ul class="dropdown-menu dropdown-light pull-right" role="menu">
								<li>
									<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>折叠</span> </a>
								</li>
								<li>
									<a class="panel-expand" href="#">
										<i class="fa fa-expand"></i> <span>全屏</span>
									</a>
								</li>
							</ul>
						</div>
						<a class="btn btn-xs btn-link panel-close" href="#">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="panel-body">
					<div class="form-group panel-cont">
					    <label class="col-sm-2 control-label">类型</label>
					    <div class="col-sm-5">
					      	<input type="text" class="form-control" id="type" />
					    </div>
				  	</div>
				  	<div class="form-group panel-cont">
					    <label class="col-sm-2 control-label">名称</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" id="imgName" />
					    </div>
				  	</div>
				  	<div class="form-group panel-cont">
					    <label class="col-sm-2 control-label">电影顶部图片</label>
					    <div class="col-sm-5 uploadImg">
					    	<div>选择文件</div>
					      	<input type="file" class="form-control" id="topImg" />
					    </div>
					    <span class="col-sm-4 tips">
					    	<i class="fa fa-info-circle"></i>
					    	类型为 gif,jpg,jpeg,bmp,png
					    </span>
				  	</div>
				  	<div class="form-group panel-cont">
					    <label class="col-sm-2 control-label">图片预览</label>
					    <div class="col-sm-5 imgShow">
					    	<img style="max-width: 150%" src="" alt="" />
					    </div>
				  	</div>
				  	<div class="form-group panel-cont">
					    <label class="col-sm-2 control-label">推广链接</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" id="link" />
					    </div>
				  	</div>
				  	<div class="form-group panel-cont">
					    <label class="col-sm-2 control-label">展示顺序</label>
					    <div class="col-sm-5">
					      <input type="text" class="form-control" id="showTurn" />
					    </div>
				  	</div>
				  	<div class="form-group">
				  		<div class="col-sm-2 col-sm-offset-3">
				  			<button type="button" class="btn btn-danger submit-btn">提交&nbsp;<i class="fa fa-arrow-circle-right"></i></button>
				  		</div>
				  	</div>
				</div>
			</div>
		</div>
	</div>
</form>
<script>
	/**************************************变量********************************************/
	var username = GetQueryString("username");      // 用户姓名
	var token = MXCookie.get("token",token);  // 登陆token  
	var bannerId = $(".pageAdd").attr("data-id");
	var imgUrl;

	/**************************************事件********************************************/ 	
	// 上传图片
	editImg();

	// 提交
	$(".submit-btn").click(function(){
		if(checkMsg()){
			if($(".imgShow img").attr("src").split(",")[1]){
				imgUrl = $(".imgShow img").attr("src").split(",")[1];
				submitData(imgUrl);
			}else{
				var url=$(".imgShow img").attr("src");
				main(url, function(base64){
					imgUrl = base64;
					submitData(imgUrl);
				}); 
			}
		}
	});
	

	/**************************************函数********************************************/
	// 信息验证
	function checkMsg(){
		if($("#imgName").val() == ""){
			tips("名称不能为空");
			$(this).focus();
			return false;
		}else if($(".imgShow img").attr("src") == ""){
			tips("请选择图片");
			return false;
		}else if($("#link").val() == ""){
			tips("请填写推广链接");
			$(this).focus();
			return false;
		}else if($("#showTurn").val() == ""){
			tips("请填写展示顺序");
			$(this).focus();
			return false;			
		}else{
			return true;
		}
	}


	// 获取详情
	$.ajax({
		url: localStorage.grobalUrl + "/banner/lookBanner",
		type: "post",
		data:{
			username: username,
			token: token,
			bannerID: bannerId
		},
		success: function(data){
			console.log(data);
			if(data.errCode == "00005"){
				tips("请重新登陆");
	          	setTimeout(function(){
	            	window.location.href = "login_login.html";
	          	},500);				
			}else{
				var bannerView = data[0];
				$("#imgName").val(bannerView.name);
				$(".imgShow img").attr("src",bannerView.img_url);
				$("#link").val(bannerView.link);
				$("#showTurn").val(bannerView.show_order);
				$("#type").val("轮播图");
				$("#createDate").val(bannerView.create_time);				
			}
			
		},
		error: function(err){
			console.log(err);
		}
	});	
	

	// 图片转base64
	function getBase64Image(img) {
	    var canvas = document.createElement("canvas");
	    canvas.width = img.width;
	    canvas.height = img.height;
	    var ctx = canvas.getContext("2d");
	    ctx.drawImage(img, 0, 0, img.width, img.height);
	    var dataURL = canvas.toDataURL("image/png");  // 可选其他值 image/jpeg
	    return dataURL;
	}
	function main(src, cb) {
	    var image = new Image();
	    image.src = src + '?v=' + Math.random(); // 处理缓存
	    image.crossOrigin = "*";  // 支持跨域图片
	    image.onload = function(){
	        var base64 = getBase64Image(image);
	        cb && cb(base64);
	    }
	}

	


	// 提交
	function submitData(imgUrl){
		$.ajax({
			url: localStorage.grobalUrl + "/banner/updateBanner",
			type: "post",
			data: {
				username: username,
				token: token,
				bannerID: bannerId,
				baseCode: imgUrl,
				name: $("#imgName").val(),
				link: $("#link").val(),
				show: $("#showTurn").val()
			},
			success: function(data){
				console.log(data);
				// if(data.errCode == "00005"){
		  //         	tips("请重新登陆");
		  //         	setTimeout(function(){
		  //           	window.location.href = "login_login.html";
		  //         	},500);
    //     		}else if(data.errCode == "00000"){
    //       			// getPage("../../view/movieBanner/list.html");
				// }else{
				//   tips("更新失败");
				// }
			},
			error: function(err){
				console.log(err);
			}
		});
	}
	
</script>
